<template>
    <div >
        <a-modal width="600px" :title="title" :visible="visible" @cancel="cancel">
            <a-form-model layout="inline" class="yuan-form" :label-col="{ style: { width: '100px' } }"
                :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                <div class="form-panel">
                    <a-form-model-item label="原因">
                        <span class="showInfobox"
                            style="display: inline-block;width: 368px;background: #eee;padding: 5px 10px;border-radius: 5px;line-height:25px;">
                            {{info}}
                        </span>
                    </a-form-model-item>
                </div>
                
            </a-form-model>
            <template slot="footer">
                    <a-button @click="cancel">
                        关闭
                    </a-button>
                </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
@Component({
    name: "tpl",
    components: { },
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: '' }) info!: string;
    @Prop({ default: '' }) title!: string;
    cancel(){
        this.$emit('cancel')
    }
    
    
}
</script>